<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/dialog/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasic">
			<div class="m-section">
				<span class="m-section__sub">
					The
					<mark>MatDialog</mark> service can be used to open modal dialogs with Material Design styling and animations.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<ol>
						<li>
						  <mat-form-field>
							<input matInput [(ngModel)]="name" placeholder="What's your name?">
						  </mat-form-field>
						</li>
						<li>
						  <button mat-raised-button (click)="openDialog()">Pick one</button>
						</li>
						<li *ngIf="animal$ | async as anim">
						  You chose: {{anim}}
						</li>
					  </ol>
				</div>
			</div>
		</m-material-preview>
		<m-material-preview [viewItem]="exampleInjecting">
			<div class="m-section">
				<span class="m-section__sub">
					To access the data in your dialog component, you have to use the
					<mark>MAT_DIALOG_DATA</mark> injection token
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<button mat-button (click)="openDialog2()">Open dialog</button>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="examplHeader">
			<div class="m-section">
				<p class="m-section__sub">
					Once a dialog opens, the dialog will automatically focus the first tabbable element.
				</p>
				<p class="m-section__sub">
					You can control which elements are tab stops with the
					<mark>tabindex</mark> attribute
				</p>
				<div class="m-section__content">
					<button mat-button (click)="openDialog3()">Open dialog</button>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>